import React, { useEffect, useState } from 'react';
import { Card, Row, Col, message, Icon, Spin, Empty } from 'antd';
import { connect } from 'umi';
import moment from 'moment';
import { get as getPath } from 'object-path';
import QueryPage from '@/components/QueryPage';
import SalaryRefTable from '@/components/SalaryRefTable';
import { history } from 'umi';
import { hideSalaryTable } from '@/utils/utils';
import { withRoutePage } from '@/utils/enhanceUtils';
import styles from './index.less';

const AdjustPostHistory = ({ adjustPost, dispatch, location }) => {
    const { query = {} } = location;
    const { historyData } = adjustPost;
    const [historyTab, setHistoryTab] = useState(0);
    const [spinning, setSpinning] = useState(false);

    const moneyStatus = {
        0: '不变',
        1: '上浮',
        2: '下降'
    };
    // 获取当前用户地区
    const getCity = () => {
        if (query.companyId && query.companyId === 100) {
            return '集团';
        }
        if (query.companyId === 101) {
            return '厦门';
        }
        return '新加坡';
    };

    // 获取详情
    const fetchDetail = () => {
        setSpinning(true);
        dispatch({
            type: query.type === 'hr' ? 'adjustPost/getHistoryDetail' : 'adjustPost/getPersonHistoryDetail',
            payload: {
                employeeCode: query.employeeCode
            },
            callback: response => {
                if (response.code !== 10000) {
                    setSpinning(false);
                    message.error(response.msg);
                    if (response.code === 150004) {
                        history.push('/personal/portal');
                    }
                } else {
                    setSpinning(false);
                }
            }
        });
    };

    // 切换tab
    const changeHistoryTab = index => {
        setHistoryTab(index);
    };
    const renderGroupCeo = () => (
        <li>
            <span>集团CEO给予调岗结果：</span>
            <span>{historyData[historyTab] && historyData[historyTab].groupCeoApproval === '0' ? '同意' : '拒绝'}</span>
        </li>
    );

    useEffect(() => {
        fetchDetail();
        return () => {
            dispatch({
                type: 'adjustPost/clear'
            });
        };
    }, []);

    return (
        <div>
            <QueryPage
                className={styles.searchwn}
                form={
                    <Card
                        bordered={false}
                        title={
                            <Row justify="space-between" type="flex">
                                <Col className={styles.adjustPostTitle}>
                                    调岗详情-{getCity()}-{query.employeeName}
                                </Col>
                            </Row>
                        }
                        className={styles.adjustPostHistoryCard}
                    >
                        <Spin spinning={spinning} delay={0}>
                            {historyData && historyData.length > 0 ? (
                                <div>
                                    <ul className={styles.adjustPostTab}>
                                        {historyData && historyData.length > 1 ? (
                                            historyData.map((item, index) => (
                                                <li
                                                    key={item.id}
                                                    className={historyTab === index ? styles.active : ''}
                                                    onClick={() => {
                                                        changeHistoryTab(index);
                                                    }}
                                                >
                                                    {moment(item.transferDate).format('YYYY-MM-DD')} 调岗申请-调岗
                                                    {item.states === '7' ? '成功' : '失败'}
                                                </li>
                                            ))
                                        ) : (
                                            <li
                                                key={historyData[0].id}
                                                className={styles.active}
                                                style={{ borderRadius: '4px' }}
                                                onClick={() => {
                                                    changeHistoryTab(0);
                                                }}
                                            >
                                                {moment(historyData[0].transferDate).format('YYYY-MM-DD')} 调岗申请-调岗
                                                {historyData[0].states === '7' ? '成功' : '失败'}
                                            </li>
                                        )}
                                    </ul>
                                    <div className={styles.adjustPostTitle} style={{ margin: '32px 0 24px' }}>
                                        员工基本信息
                                    </div>
                                    <div className={styles.adjustPostHistoryList}>
                                        <ul className={styles.adjustPostHistoryTable}>
                                            <li>
                                                <span>员工姓名：</span>
                                                <span>{getPath(historyData, `${historyTab}.employeeName`, '')}</span>
                                            </li>
                                            <li>
                                                <span>办理调岗日期：</span>
                                                <span>{getPath(historyData, `${historyTab}.transferDate`, '')}</span>
                                            </li>
                                            <li>
                                                <span>调岗前部门/职位/职级：</span>
                                                <span>
                                                    {getPath(historyData, `${historyTab}.preDepartmentName`, '')}
                                                    {historyData[historyTab] &&
                                                    historyData[historyTab].preDepartmentName &&
                                                    historyData[historyTab].prePostName
                                                        ? '/'
                                                        : ''}
                                                    {getPath(historyData, `${historyTab}.prePostName`, '')}
                                                    {historyData[historyTab] &&
                                                    historyData[historyTab].prePostGradeCode !== ''
                                                        ? `/${historyData[historyTab].prePostGradeCode}`
                                                        : null}
                                                </span>
                                            </li>
                                            <li>
                                                <span>调岗后部门/职位/职级：</span>
                                                <span>
                                                    {getPath(historyData, `${historyTab}.afterDepartmentName`, '')}
                                                    {historyData[historyTab] &&
                                                    historyData[historyTab].afterDepartmentName &&
                                                    historyData[historyTab].afterPostName
                                                        ? '/'
                                                        : ''}
                                                    {getPath(historyData, `${historyTab}.afterPostName`, '')}
                                                    {historyData[historyTab] &&
                                                    historyData[historyTab].afterPostGradeCode !== ''
                                                        ? `/${historyData[historyTab].afterPostGradeCode}`
                                                        : null}
                                                </span>
                                            </li>
                                            <li>
                                                <span title="调岗前直属上级薪资调整建议">
                                                    薪资建议
                                                    <Icon type="info-circle" />：
                                                </span>
                                                <span>
                                                    {
                                                        moneyStatus[
                                                            getPath(
                                                                historyData,
                                                                `${historyTab}.salaryAdjTypeExSuperior`,
                                                                ''
                                                            )
                                                        ]
                                                    }{' '}
                                                    {historyData[historyTab] &&
                                                    historyData[historyTab].salaryAdjTypeExSuperior === '0'
                                                        ? ''
                                                        : `${historyData[historyTab].salaryAdjPerExSuperior}%`}
                                                </span>
                                            </li>
                                            <li>
                                                <span>意见或建议：</span>
                                                <span>
                                                    {getPath(historyData, `${historyTab}.suggestionExSuperior`, '')}
                                                </span>
                                            </li>
                                            <li>
                                                <span title="调岗后直属上级薪资调整建议">
                                                    薪资建议
                                                    <Icon type="info-circle" />：
                                                </span>
                                                <span>
                                                    {
                                                        moneyStatus[
                                                            getPath(
                                                                historyData,
                                                                `${historyTab}.salaryAdjTypeNextSuperior`,
                                                                ''
                                                            )
                                                        ]
                                                    }{' '}
                                                    {historyData[historyTab] &&
                                                    historyData[historyTab].salaryAdjTypeNextSuperior === '0'
                                                        ? ''
                                                        : `${historyData[historyTab].salaryAdjPerNextSuperior}%`}
                                                </span>
                                            </li>
                                            <li>
                                                <span>意见或建议：</span>
                                                <span>
                                                    {getPath(historyData, `${historyTab}.suggestionNextSuperior`, '')}
                                                </span>
                                            </li>
                                            <li>
                                                <span>薪资调整确认：</span>
                                                <span>
                                                    {
                                                        moneyStatus[
                                                            getPath(historyData, `${historyTab}.salaryAdjTypeHr`, '')
                                                        ]
                                                    }{' '}
                                                    {historyData[historyTab] &&
                                                    historyData[historyTab].salaryAdjTypeHr === '0'
                                                        ? ''
                                                        : `${historyData[historyTab].salaryAdjPerHr}%`}
                                                </span>
                                            </li>
                                            {!hideSalaryTable && (
                                                <li>
                                                    <span>薪资参考：</span>
                                                    <span>
                                                        <SalaryRefTable
                                                            postId={historyData[historyTab].afterPostId}
                                                            companyId={query.companyId}
                                                        />
                                                    </span>
                                                </li>
                                            )}
                                            <li>
                                                <span>区域CEO给予调岗结果：</span>
                                                <span>
                                                    {historyData[historyTab] && historyData[historyTab].approval === '0'
                                                        ? '同意'
                                                        : '拒绝'}
                                                </span>
                                            </li>
                                            {historyData[historyTab] && historyData[historyTab].groupCeoApproval === ''
                                                ? ''
                                                : renderGroupCeo()}
                                        </ul>
                                    </div>
                                </div>
                            ) : (
                                <Empty />
                            )}
                        </Spin>
                    </Card>
                }
            />
        </div>
    );
};
export default withRoutePage(
    connect(({ loading, adjustPost }) => ({
        loading: loading.models.adjustPost,
        adjustPost
    }))(AdjustPostHistory)
);
